<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>广东省业务数据平台</title>
    <script src="./jquery.js"></script>
    <script src="./echarts.min.js"></script>
    <script src="./echarts-gl.min.js"></script>
</head>
<body>
<!-- 3D地图容器 -->
<div id="main" style="width: 100%; height: 900px;"></div>
<script>
    // 初始化图表
    var myChart = echarts.init(document.getElementById('main'));
    var guangdong = "./city.json";
    //文字显示坐标数据，可自行调整
    // var mapData = [
    //     {name: '广州市', value: [113.40, 23.20],code:'440100'}
    //     , {name: '省本级', value: [113.405775, 23.502733],code:'449900'}
    //     , {name: '韶关市', value: [113.591544, 24.701322],code:'440200'}
    //     , {name: '深圳市', value: [114.1, 22.55],code:'440300'}
    //     , {name: '珠海市', value: [113.3, 22.05],code:'440400'}
    //     , {name: '汕头市', value: [116.6, 23.25],code:'440500'}
    //     , {name: '佛山市', value: [112.822717, 22.908762],code:'440600'}
    //     , {name: '江门市', value: [112.504942, 22.190431],code:'440700'}
    //     , {name: '湛江市', value: [110.004977, 21.074898],code:'440800'}
    //     , {name: '茂名市', value: [110.719229, 21.909751],code:'440900'}
    //     , {name: '肇庆市', value: [112.072529, 23.351546],code:'441200'}
    //     , {name: '惠州市', value: [114.412599, 23.199404],code:'441300'}
    //     , {name: '梅州市', value: [115.9, 24],code:'441400'}
    //     , {name: '汕尾市', value: [115.40, 22.90],code:'441500'}
    //     , {name: '河源市', value: [114.697802, 23.799996],code:'441600'}
    //     , {name: '阳江市', value: [111.575107, 21.899222],code:'441700'}
    //     , {name: '清远市', value: [112.801544, 24.041322],code:'441800'}
    //     , {name: '东莞市', value: [113.78, 22.9],code:'441900'}
    //     , {name: '中山市', value: [113.382391, 22.521113],code:'442000'}
    //     , {name: '潮州市', value: [116.7, 23.7],code:'445100'}
    //     , {name: '揭阳市', value: [115.95, 23.3],code:'445200'}
    //     , {name: '云浮市', value: [111.644439, 22.729801],code:'445300'}

    // ];
    //3D地图旋转主要配置
    var viewControl={
        alpha: 50, // 上下旋转的角度
        beta: -2, // 左右旋转的角度
        rotateSensitivity: 3, // 旋转操作的灵敏度
        panSensitivity: 3,
        panMouseButton: 'right',
        distance: 180,
        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
        maxAlpha: 100, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
        minBeta: 25, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
        maxBeta: 360, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
        animation: false, // 是否开启动画。[ default: true ]
        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
        animationEasingUpdate: "cubicInOut" // 过渡动画的缓动效果。[ default: cubicInOut ]
    }
    $.getJSON(guangdong, function (result) {
        const mapData = result.features.map(item => {
            const { name, center: value, adcode: code } = item.properties
            return { name, value, code }
        })
        // 注册 echarts 地图
        echarts.registerMap('中国', result);
        var option = {
            backgroundColor:'#000d4a',
            // geo3D: {
            //     map: '中国',
            //     show: true,
            //     // boxWidth: 200,
            //     // boxHeight: 15, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
            //     regionHeight: 5,
            //     shading: 'lambert',
            //     top: -15,//文字悬浮高度
            //     viewControl: viewControl
            // },
            series: [
                {
                    type: 'map3D',
                    map: '中国',
                    show: true,
                    boxWidth: 200,
                    // boxHeight: 15, //4:没有bar. 30:有bar,bar最高度30，按比例分配高度
                    // regionHeight: 5,
                    shading: 'lambert',
                    itemStyle: {
                        color: "#1CA7FC",
                        opacity: 1,
                        borderWidth: 3,
                        borderColor: "#50e6fd",
                    },
                    emphasis: {
                        label: {
                            show: false,
                            distance: 2,
                            textStyle: {
                                color: '#fff'
                            }
                        },
                        itemStyle: {
                            color: "#50e6fd",
                        }
                    },
                    light: {
                        main: {
                            shadow: true,
                            shadowQuality: 'ultra',
                        }
                    },
                    viewControl: viewControl,
                },
                // {
                //     type: 'scatter3D',
                //     coordinateSystem: 'geo3D',
                //     zlevel: 3,
                //     symbol: 'circle',
                //     symbolSize: 10,//圆点大小
                //     label: {
                //         show: true,
                //         formatter: ' {b} ',
                //     },
                //     data: mapData,
                //     itemStyle: { //坐标点颜色
                //         color: '#fff',
                //         shadowBlur: 20,
                //         shadowColor: '#fff'
                //     },
                //     emphasis: {
                //         itemStyle: { //坐标点颜色
                //             color: '#ffb800'
                //         },
                //     }
                // }
            ]
        };
        myChart.setOption(option);
    });
    // 点击事件（图层原因，会输出两条数据）
    myChart.on('click', function (params) {
        console.log(params);
    });
</script>
</body>
</html>
